import { useState } from 'react'
import { Input, List, Tooltip, Whisper } from 'rsuite'
import Placeholder from './Placeholder'

const Empty = ({ onEdit }) => (
  <Placeholder
    onEdit={onEdit}
    text="填写详细联系方式"
    slogan="采采产保景伯行？风则突无六才理民免亡袋明满？目统模复往您鞋队阳？飞奖天恩黑姆在治寻。兰苏旧生卖长。除转岁含更预腿音狗队料里似群。"
  />
)
const Display = ({ data }) =>
  data ? (
    <List>
      <List.Item>电话: {data.phone}</List.Item>
      <List.Item>Email: {data.email}</List.Item>
    </List>
  ) : null

const Edit = ({ data = {}, onSubmit, onCancel }) => {
  const [local, setLocal] = useState(data)
  const [errors, setErrors] = useState({})

  const update = (fieldName) => (value) =>
    setLocal({ ...local, [fieldName]: value })
  return (
    <div>
      <div className="mb-3">
        <label className="form-label">电话</label>
        <Whisper
          speaker={<Tooltip>{errors.phone}</Tooltip>}
          placement="top"
          open={errors.phone ? true : false}
        >
          <Input
            size="md"
            defaultValue={local.phone}
            onChange={(value) => {
              if (value.length === 0) {
                setErrors({ ...errors, phone: '您还没有填写电话' })
              } else if (
                !/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/.test(
                  value
                )
              ) {
                setErrors({ ...errors, phone: '电话格式错误' })
              } else {
                delete errors.phone
                setErrors({ ...errors })
                update('phone')(value)
              }
            }}
          />
        </Whisper>
      </div>

      <div className="mb-3">
        <label className="form-label">Email</label>
        <Whisper
          speaker={<Tooltip>{errors.email}</Tooltip>}
          placement="top"
          open={errors.email ? true : false}
        >
          <Input
            size="md"
            defaultValue={local.email}
            onChange={(value) => {
              if (value.length === 0) {
                setErrors({ ...errors, email: '您还没有填写Email' })
              } else if (
                !/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(
                  value
                )
              ) {
                setErrors({ ...errors, email: 'Email格式错误' })
              } else {
                delete errors.email
                setErrors({ ...errors })
                update('email')(value)
              }
            }}
          />
        </Whisper>
      </div>

      <div className="mb-3">
        <button
          className="btn btn-primary"
          onClick={() => {
            Object.keys(errors).length === 0 && onSubmit(local)
          }}
        >
          确认
        </button>{' '}
        <button className="btn btn-danger" onClick={onCancel}>
          取消
        </button>
      </div>
    </div>
  )
}

const Contact = ({ data, isEdit, onSubmit, onCancel, onEdit }) => {
  return (
    <>
      {!isEdit && !data && <Empty onEdit={onEdit} />}
      {data && !isEdit && <Display data={data} />}
      {isEdit && <Edit {...{ data, onSubmit, onCancel }} />}
    </>
  )
}

export default Contact
